<template>
  <div v-if="isShow" class="main">
    <!-- 搜索栏 -->
    
     <!-- 商品主体 -->
    <div class="main" > 
      <image  :src='listData.img' class="carouselImg" mode='aspectFill'></image>
      <div class="prive-container">
        <div class="price">￥{{listData.price}}</div>
      </div>
      <div class="good-name">{{listData.name}}</div>
      <div class="good-about">{{listData.about}}</div>

    </div>
    <div class='placeholder-view'></div>
    <div class="footer">
      <div  class="search-container">
          <div class="flex btn">
            <button class="btn-left" @tap="sendadd">加入购物车</button>
            <button class="btn-right" @tap="sendadd">立即购买</button>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import card from '@/components/card'

export default {
  components: {
    card
  },

  data () {
    return {
      listData: [],
      isShow: false,
      openid: ''
    }
  },
  onLoad () {
    wx.showToast({
      title: 'loading',
      icon: 'loading',
      duration: 2000
    })
  },
  beforeMount () {
    wx.cloud.database().collection('goods').where({
      id: this.$mp.query.id
    }).get({
      success: res => {
        this.listData = res.data[0]
        setTimeout(() => {
          this.isShow = true
        }, 2000)
      },
      fail: console.error
    })
    wx.cloud.callFunction({
      name: 'getopenid',
      data: {
        name: ''
      },
      success (res) {
        this.openid = res.result.openid
        console.log(this.openid)
      },
      fail (res) {
        console.log(res)
      }
    })
    // 云函数调用show获取数据
    // wx.cloud.callFunction({
    //   name: 'getgoods',
    //   data: {
    //     id: this.$mp.query.id
    //   },
    //   success: res => {
    //     console.log(res)
    //     this.listData = res.result.data[0]
    //     console.log(this.listData)
    //   },
    //   fail: console.error
    // })
  },
  onUnload () {
    this.listData = ''
    this.isShow = false
    console.log(this.isShow)
  },
  methods: {
    sendadd () {
      var that = this
      wx.cloud.database().collection('order').add({
        data: {
          goodid: that.listData.id,
          goodprice: that.listData.price,
          goodname: that.listData.name,
          goodmgd: that.listData.img,
          num: 1,
          selected: true
        },
        success: function (res) {
          console.log(res)
          wx.navigateTo({
            url: '../../pages/yugou/main'
          })
        },
        fail: console.error
      })
    }

  }
}
</script>

<style  scoped>
page{
  width: 100%;
  height: 100%;
}
.main{
  width: 100%;
}
/* 搜索栏样式 锁定位置*/
.footer{
  display: flex;
  align-items: center;
  padding: 0 10rpx;
  background-color: #fff;
  height: 10%;
  position: fixed;
  top: 90%;
  left: 0;
  width: 100%;
  z-index: 99;
  box-sizing: border-box;
  border-top: 2px solid rgb(207, 207, 207);
}
.placeholder-view{
  display: inline-block;
  width: 100%;
  height: 130rpx;
}
/* 搜索框样式 */
.search-container{
  flex: 1;
  display: flex;
  align-items: center;
  margin-left: 10rpx;
  position: relative;
}
.bar{
  flex: 1;
  height: 68rpx;
  font-size: 30rpx;
  padding-left: 20rpx;
}
.search{
  color: black;
  margin-left: 20rpx;
  font-size: 24rpx;
}
.placeholder{
  color: #f5f5f5;
}

/* 商品主体样式 */
.flex{
   display: flex;
    justify-content: space-between;
    align-items: center;
}
.carouselImg{
  width: 100%;
  height: 400px;
}
.prive-container{
  height: 130rpx;
  background-color: rgb(202, 37, 119);
}
.price{
  margin-left: 30rpx;
  font-size: 45rpx;
  color:#fff;
  font-weight: 600;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.good-name{
   font-size: 50rpx;
    font-weight: 500;
    margin-left: 10rpx;
}
.good-about{
   font-size: 40rpx;
    font-weight: 400;
    margin-left: 10rpx;
}

/* button */
.btn{
  margin-left: 200rpx;
}
.btn-left{
  font-size: 35rpx;
  font-weight: 600;
  width: 250rpx;
  height: 180;
  background-color: orange;
  color: white;
  border-radius: 0rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 20px 0 0 20px;
}
.btn-right{
  font-size: 35rpx;
  font-weight: 600;
  width: 250rpx;
  height: 180;
  background-color: red;
  color: white;
  border-radius: 0rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0 20px 20px 0;
}
</style>
